<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        /*
            面试题：从一个url地址到最终页面渲染完成，发现了什么？
                1.DNS解析：讲域名地址解析为ip地址
                    -浏览器DNS缓存
                    -系统DNS缓存
                    -路由器DNS缓存
                    -网络运营商DNS缓存
                    -递归搜索 blog.baidu.com
                        - .com域名下查找DNS解析
                        - .baidu
                        - blog
                        - 出错
                2.TCP三次握手
                    -第一次握手，由浏览器发起，告诉服务器我要发现请求。
                    -第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧。
                    -第三次握手，由浏览器发起，高息服务器我马上就发了，准备接收吧。
                3.发送请求
                    -请求报文: HTTP协议的通信内容
                4.接受响应
                    -响应报文
                5.渲染页面
                    -遇见HTML标记，调用HTML解析器解析成Token并构建成dom树
                    -遇见style/link标记，调用css解析器，处理css标记并构建cssom树
                    -遇见script标记，调用javscript解析器，处理script代码 (绑定事件 绑定dom树或者cssom树)
                    -将dom树和cssom树合并成一个渲染树
                    -根据渲染树来计算布局,计算每个几点的几何信息(布局)
                    -根据各个节点颜色绘制到屏幕上(渲染)

                    注意：这五个步骤不一定按照顺序执行，如果dom树或者cssom树被修改了，可能会执行多次布局和渲染
                    往往实际页面中，这些步骤都会执行多次的。
                6.断开连接：tcp四次挥手
                    第一次挥手：由浏览器发起的，发送给浏览器，我请求报文发送完了，你准备关闭吧
                    第二次挥手：由服务器发起，告诉浏览器，我请求报文接受玩了，我准备关闭了，你准备关闭吧
                    第三次挥手：由服务器发送，告诉浏览器，我响应报文发送完了，你准备关闭吧
                    第四次挥手：由浏览器发送，告诉浏览器，我响应报文接受完了，我准备关闭了，你也准备关闭吧。


        */

        // setTimeout 实现 setInterval
        function fn(){
            setTimeout(()=>{
                fn();
                console.log(1);
                // clearTimeout(timer);
            },200)
        }
        fn();
    </script>
</body>
</html>